<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button id="btn">点击，渲染数据</button>

      <hr />
      <button class="button active">Tab1</button>
      <button class="button">Tab2</button>
      <button class="button">Tab3</button>

      <ul id="box">
        <!-- <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li> -->
      </ul>
    </div>

    <!-- 引入 jquery 类库 
      1. 全局 window 上增加了一个 jQuery 变量，还提供了 别名 $
      2. 通过 $(cssSelect) 获取 jQuery 对象
        jQuery 对象，表示对 DOM 对象的一层包装
        $('#btn')
      3. jQuery 对象 转成 DOM 对象
        $('#btn')[0]
      4. jQuery 对象绑定一个 点击事件
        $('#btn').click(function() {
          // 点击事件的处理函数
        })
        $('#btn').blur(function() {

        })
      5. addClass 、removeClass 方法
        $('#btn').addClass('box')   给 #btn 元素增加一个 box 类名
        $('#btn').addClass('box')   给 #btn 元素移除一个 box 类名
      6. $.ajax()
         $.get()
         $.post()
    -->
    <script src="../lib/jquery-3.7.0.min.js"></script>
    <script>
      // 直接对 .button 元素绑定 点击事件，不需要 循环绑定
      $(".button").click(function () {
        // this 指的是当前点击元素的 DOM 对象。PS: 注意 this 指向问题
        // $(this) 能够将当前 DOM 对象，再转换成 jQuery 对象
        console.log("button click", this);

        // 1. 对 所有的 .button 元素 移除 active 类名
        //    siblings() 获取兄弟节点的 jQuery 对象
        $(this).siblings().removeClass("active");
        // 2. 对 当前的 .button 元素 增加 active 类名
        $(this).addClass("active");
      });

      // jQuery 对象
      console.log($("#btn"));
      // DOM 对象
      console.log($("#btn")[0]);

      // 数据源
      const list = ["Apple", "Banana", "Orange"];

      // 获取元素的 jQuery 对象
      const btnEl = $("#btn");
      const ulEl = $("#box");

      // btn 绑定点击事件
      btnEl.click(function () {
        console.log("btn click");

        // 循环创建 li 元素的操作
        for (let i = 0; i < list.length; i++) {
          const liEl = document.createElement("li");
          liEl.innerHTML = list[i];

          ulEl.append(liEl);
        }
      });

      // btnEl.onclick = function () {
      //   // 循环 创建 li 元素
      //   for (let i = 0; i < list.length; i++) {
      //     const liEl = document.createElement("li");
      //     liEl.innerHTML = list[i];

      //     ulEl.appendChild(liEl);
      //   }
      // };
    </script>
  </body>
</html>
